<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<title>电表充值详情</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<style type="text/css">
			#app {
				display: none;
			}			
			#YWaitDialog {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<ul>
				<li>
					<h3>充电详情</h3>
				</li>
				<li>
					<span>订单号</span>
					<s v-text="data_master.id"></s>
				</li>
				<li>
					<span>缴费房屋</span>
					<s v-text="data_master.areaname+data_master.buildname+data_master.unitname+data_master.rommcode"></s>
				</li>
				<li>
					<span>缴费项目</span>
					<s v-text="data_master.billkindname"></s>
				</li>
				<li>
					<span>电表表号</span>
					<s v-text="data_master.meternum"></s>
				</li>
				<li>
					<span style="color: #32b599;">缴费金额</span>
					<s v-text="data_master.paymentamt+'元'"></s>
				</li>
				<li>
					<span>下单时间</span>
					<s v-text="data_master.billdate"></s>
				</li>
				<li>
					<span>支付时间</span>
					<s v-text="data_master.paydate"></s>
				</li>
				<li>
					<span>支付方式</span>
					<s v-text="data_master.paykindname"></s>
				</li>
				<li>
					<span>订单状态</span>
					<s v-text="data_master.billstatus"></s>
				</li>
				<li>
					<span>充值状态</span>
					<s v-text="data_master.rechresult"></s>
				</li>
			</ul>
			<div id="YWaitDialog">
				<p>
					请等待，正在查询数据 <img src="../images/loding.gif" />
				</p>
			</div>
		</div>
	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	body,
	html {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	
	#YWaitDialog {
		background-color: #fff;
		position: absolute;
		margin: auto;
		top: 0px;
		left: 0;
		display: none;
		height: 100%;
		width: 100%;
	}
	
	#YWaitDialog p {
		height: 50px;
		width: 100%;
		position: absolute;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		vertical-align: central;
	}
	
	#app {
		margin: 0;
		/*padding: 0 0.3rem;*/
	}
	
	#app h3 {
		font: 0.32rem/0.72rem "";
		margin-top: 0px;
		color: #000000;
		font-weight: 700;
		margin-bottom: 0;
		/*margin-left: 0.3rem;*/
		margin-top: 0.1rem;
	}
	
	ul {
		/*margin-top: 0.15rem;*/
	}
	
	ul li {
		height: 40px;
		display: flex;
		padding: 0 0.3rem;
		justify-content: space-between;
		/*border-bottom: 0.01rem solid #efeff4;*/
		box-shadow: 0px 1px 0px #f5f5f5;
	}
	
	ul li span {
		font: 14px/40px "";
		color: #000000;
	}
	
	ul li s {
		font: 14px/40px "";
		color: #6a6a6a;
	}
</style>
<script>
	new Vue({
		el: '#app',
		data: {
			data_master: {

			},
		},
		mounted: function() {
			var that = this;
			var urlr = getUrl();
			that.urlr = urlr;
			that.userId = getUrlParam('userid');
			that.sign = getUrlParam('token');
			that.id = getUrlParam('bullid');
			if(that.userId == null || that.sign == null || that.id == null) {
				alert("请重新登录")
			} else {
				var data_pri = {
					id: that.id,
				}
				var requestString = {
					sign: that.sign,
					userId: that.userId,
					requestString: JSON.stringify(data_pri)
				};
				//				console.log(requestString)
				//				console.log(JSON.stringify(requestString))
				var data = JSON.stringify(requestString);
				that.selectRommList(data)
			}
		},
		created: function() {

		},
		methods: {
			//加载详情
			selectRommList: function(data) {
				var that = this;
				$("#YWaitDialog").show();
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: this.urlr + "/verify/order/selectElePayOrder",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						$("#YWaitDialog").hide();
						if(msg.code == 200) {
							var aa = JSON.parse(msg.returnString)
							if(aa.billstatus == 0) {
								aa.billstatus = "未完成"
							} else if(aa.billstatus == 1) {
								aa.billstatus = "已完成(成功支付)"
							} else if(aa.billstatus == 2) {
								aa.billstatus = "已取消"
							} else if(aa.billstatus == 3) {
								aa.billstatus = "已退款"
							} else if(aa.billstatus == 4) {
								aa.billstatus = "缴费失败，已退款"
							} else if(aa.billstatus == 5) {
								aa.billstatus = "缴费失败，系统自主退款失败"
							}
							if(aa.rechresult == 1) {
								aa.rechresult = "充值成功"
							} else {
								aa.rechresult = "充值中"
							}
							that.data_master = aa;
							$("#app").show();
						} else {
							alert(msg.disp)
						}
					},
					error: function() {
						$("#YWaitDialog").hide();
						alert("获取信息失败");
					}
				});

			},

		}
	})
</script>